import React, { useEffect, useState } from 'react'
import { BorderBox1, Loading } from '@jiaminghi/data-view-react'
import * as echarts from 'ec5';
// import echarts from '../../../../assets/echarts';
// import data from './data'
import options from './options'
import { isUndefined,isEmpty } from 'lodash'
import data from './data'
import LoadSty from '../../../../utils/hooks'
import { connect } from 'dva'
import "./trb.css"


function Index({ dva }) {

    let [Load, setLoad] = useState('flex')

    const InitCreateApp = (config) => {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('Trecom'));
        // 绘制图表
        myChart.setOption(options(config));
    }

    useEffect(() => {
        InitCreateApp(data)
    }, [])

    useEffect(() => {
        if (!isEmpty(dva)) {
            InitCreateApp(dva)
            setLoad('none')
        }
    }, [dva])

    return (
        <BorderBox1 style={{ flex: 6, marginTop: 30 }} >
            <Loading style={LoadSty(Load)}>大数据计算加载中.....</Loading>
            <div id="Trecom" style={{ width: '100%', height: '100%' }}></div>
        </BorderBox1>
    )
}

const mapStateToProps = ({ rightBottom }, ownProps) => {
    return {
        dva: rightBottom
    }
}

const A = connect(mapStateToProps)(Index)
export default A
